<template lang="pug">
    div(class="batman-following-list")
        paged-panel(v-model="page", @scroll-bottom="getMyFollowing",:completed="loadCompleted",i-class="main-body-height")
            el-row(class="batman-following-list__item", v-for="item in paged.items", :key="item.wxUId")
                el-col(class="batman-following-list__item_avatar", :span="3")
                    el-image(:src="item.avatar", fit="fit")
                el-col(class="batman-following-list__item_wxname", :span="15")
                    span {{item.wxName}}
                el-col(class="batman-following-list__item_btn", :span="5")
                    follow-button(:target-wx-uid="item.wxUId", :is-following.sync="item.following")

</template>

<script>
    import BaseVue from "@/mixins/BaseVue";
    import axios from "@/plugins/axios";
    import PagedPanel from "batman-paged-panel";
    import util from "@/libs/util";
    import FollowButton from "@/pages/components/follow-button";

    export default {
        mame: "following-list",
        mixins: [BaseVue],
        data() {
            return {
                page: {maxResultCount: 25, skipCount: 0},
                paged: {items: []},
                loadCompleted: false
            };
        },
        components: {"paged-panel": PagedPanel, "follow-button": FollowButton},
        props: {
            "wx-uid": {type: String, default: null}
        },
        computed: {
            following() {
                return this.wxUid || util.cookies.get("wxuid");
            },
            filter() {
                return {WxUserId: this.following};
            }
        },
        methods: {
            getMyFollowing(resolve) {
                const options = {
                    url: "forum/follow/myfollowing",
                    method: "post",
                    data: {page: this.page, filter: this.filter}
                };
                axios(options)
                    .then(this.getMyFollowingSuccess)
                    .catch(() => {
                    })
                    .then(() => resolve());
            },
            getMyFollowingSuccess(paged) {
                if (paged.items.length === 0) {
                    this.loadCompleted = true;
                    return;
                }

                paged.items.forEach(t=> t.following = true);
                this.paged.items = this.paged.items.concat(paged.items);
            }
        }
    };
</script>

<style lang="less">
    @import "../../common/common.less";

    .batman-following-list {
        background-color: @page_background;
        min-height: calc(100vh - @navigate_bottom_height);

        &__item {
            display: flex;
            background-color: white;
            padding: 10px;
            align-content: center;
            @width: 35px;

            &_avatar {
                width: @width;
                height: @width;
            }

            &_wxname {
                padding: 0 10px;
                line-height: @width;
            }
        }
    }
</style>